<div class="{{ content_class }}">
  {%- if block.settings.time != blank and is_time_overlay -%}
    <div class="time small py-1 overlay-on-line time-content {{ overlay_bg }} {{ overlay_position }}">
      {{ block.settings.time }}
    </div>
  {%- else -%}
    <div class="position-relative">
      <div class="dot {{ dot_class }} {{ overlay_position }}"></div>
    </div>
  {%- endif -%}

  <div class="text-content">
    {%- if block.settings.time != blank and is_time_overlay == false -%}
      <div class="time small position-relative {{ overlay_position }}">{{ block.settings.time }}</div>
    {%- endif -%}
    
    {%- if block.settings.heading != blank -%}
      <div class="heading mb-0 h3 {% if block.settings.time != blank and is_time_overlay == false %}mt-2{% endif %}">{{ block.settings.heading }}</div>
    {%- endif -%}
  
    {%- if block.settings.text != blank -%}
      <div class="mt-2 mt-md-3 no-last-margin richtext-with-link {{ richtext_link_style }}">{{ block.settings.text }}</div>
    {%- endif -%}
  
    {%- if block.settings.image != blank -%}
      <div class="img-wrapper ratio ratio-1x1 mt-2 mt-md-3 mt-lg-4">
        <img
          srcset="{%- if block.settings.image.width >= 550 -%}{{ block.settings.image | image_url: width: 550 }} 550w,{%- endif -%}
            {%- if block.settings.image.width >= 720 -%}{{ block.settings.image | image_url: width: 720 }} 720w,{%- endif -%}
            {%- if block.settings.image.width >= 990 -%}{{ block.settings.image | image_url: width: 990 }} 990w,{%- endif -%}
            {%- if block.settings.image.width >= 1200 -%}{{ block.settings.image | image_url: width: 1200 }} 1200w,{%- endif -%}
            {{ block.settings.image | image_url }} {{ block.settings.image.width }}w"
          src="{{ block.settings.image | image_url: width: 1200 }}"
          sizes="(max-width: 768px) 400px, 240px"
          alt="{{ block.settings.image.alt | escape }}"
          loading="lazy"
          width="{{ block.settings.image.width }}"
          height="{{ block.settings.image.height }}"
          class="img object-fit-cover"
        >
      </div>
    {%- else -%}
      {%- if show_img_placehoder -%}
        <div class="img-wrapper ratio ratio-1x1 mt-2 mt-md-3 mt-lg-4 bg-gray-100">
          {{ 'image' | placeholder_svg_tag: 'placeholder-svg h-100 w-100' }}
        </div>
      {%- endif -%}
    {%- endif -%}
  </div>
</div>